﻿@using LibraryCatalog.Models
@model IndexModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Библиотечный каталог</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.dataTables.js"></script>
    <script>
        function parentsAttr(element, attrName) {
            return element.parents("[" + attrName + "]").attr(attrName);
        }

        function closeDialog() {
            $('#@Const.dialogShade').hide();
            $('#@Const.editBookDialog').hide();
        }

        function showDialog() {
            $('#@Const.dialogShade').show();
            $('#@Const.editBookDialog').show();
            $('#@Const.bookName').focus();
        }

        function recalSizes() {
            var gridBody = $('#books_wrapper .dataTables_scrollBody');
            var body = $('body');
            gridBody.css('height', $(window).height() - gridBody.offset().top -
            (body.outerHeight(true) - body.height() - body.offset().top));
            $('#books').data("grid").fnAdjustColumnSizing();
        }

        $(function () {
            $.ajaxSetup({
                type: "POST",
                error: function(jqXHR, textStatus, errorThrow) {
                    alert("Request failed: " + textStatus + ", " + errorThrow);
                }
            });

            var loadingShade = $('#@Const.loadingShade');
            $(document).ajaxStart(function () {
                loadingShade.css({ 'cursor': '' }).show();
                setTimeout(function () {
                    loadingShade.css({ 'cursor': 'wait' });
                }, 100);
            }).ajaxStop(function () {
                loadingShade.css({ 'cursor': '' }).hide();
            });;

            $(window).bind('resize', recalSizes);

            $('.@Const.addBook').click(function () {
                $.ajax({
                    url: '@(Url.Action("AddBook"))',
                    success: function(data) {
                        $('#@Const.editBookDialogContent').html(data);
                        showDialog();
                    }
                });
            });

            $('#@Const.editBookDialog').keydown(function(event) {
                if (event.which === 27 /*ESCAPE_KEY*/) closeDialog();
            });

            $('#@Const.BooksGridContainer').show();
        });
    </script>
</head>
<body>
    <table class="headerTable">
        <tr>
            <td>
                <span class="headerFont">Библиотечный каталог</span>
            </td>
        </tr>
    </table>
    <div class="addBookDiv">
        <a href="javascript:void(0)" class="@Const.addBook">Добавить книгу</a>
    </div>
    <div id="@Const.BooksGridContainer" style="display: none">
        @Html.Partial("BooksGrid", new BookGridModel(Model.Books))
    </div>
    <div id="@Const.editBookDialog" class="modalDialog">
        <div id="@Const.editBookDialogContent"></div>
    </div>
    <div id="@Const.dialogShade"></div>
    <div id="@Const.loadingShade"></div>
</body>
</html>